import React, { forwardRef } from 'react';
import './index.scss';

export interface InfrastructureStatItem {
  label: string;
  value: number;
}

export interface InfrastructureProps {
  /**
   * 组件标题
   */
  title?: string;
  
  /**
   * 英文标题
   */
  englishTitle?: string;
  
  /**
   * 统计数据
   */
  statisticsData?: InfrastructureStatItem[];
  
  /**
   * 点击事件
   */
  onClick?: () => void;
  
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  
  /**
   * 自定义类名
   */
  className?: string;
  
  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const Infrastructure = forwardRef<HTMLDivElement, InfrastructureProps>((props, ref) => {
  const {
    title = '基础设施',
    englishTitle = 'Infrastructure',
    statisticsData = [
      { label: '前端感知设备', value: 16785 },
      { label: '设施', value: 4753 },
      { label: '普通设备', value: 53519 }
    ],
    onClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  const handleClick = () => {
    onClick?.();
  };

  const componentClassName = [
    'hzdz-infrastructure',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={componentClassName}
      style={style}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 顶部标题栏 */}
      <div className="hzdz-infrastructure__header">
        <div className="hzdz-infrastructure__header-content">
          <div className="hzdz-infrastructure__title">{title}</div>
          <div className="hzdz-infrastructure__english-title">{englishTitle}</div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="hzdz-infrastructure__content">
        <div className="hzdz-infrastructure__statistics">
          {statisticsData.map((item, index) => (
            <div key={index} className="hzdz-infrastructure__stat-item">
              <div className="hzdz-infrastructure__stat-label">{item.label}</div>
              <div className="hzdz-infrastructure__stat-value">{item.value.toLocaleString()}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
});

Infrastructure.displayName = 'Infrastructure';

export default Infrastructure;